<template>
  <div class="mt-4">
    <NRow :gutter="24">
      <NCol :span="24">
        <n-card content-style="padding: 0;" :bordered="false">
          <p style="font-size: 16px; margin-top: 20px; margin-left: 20px">交易统计</p>
          <n-space justify="end" style="margin-top: 18px; margin-bottom: 18px">
            <n-radio
              :checked="checkedValue === '7'"
              @change="handleChange"
              value="7"
              name="basic-demo"
            >
              近7天
            </n-radio>
            <n-radio
              :checked="checkedValue === '30'"
              @change="handleChange"
              value="30"
              name="basic-demo"
            >
              近30天
            </n-radio>
          </n-space>
          <!-- <Salesreport style="width: 1500px; margin-left: 70px" /> -->
          <div ref="chartRef" :style="{ height, width }"></div>
        </n-card>
      </NCol>
    </NRow>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, provide, onMounted } from 'vue';
import Salesreport from './salse/Salesreport.vue';
import { getSalesDate } from '@/api/report/salesReport';
import { createStorage } from '@/utils/Storage';
import { func } from 'vue-types';

import { useECharts } from '@/hooks/web/useECharts';

import { basicProps } from './props';
const Storage = createStorage({ storage: localStorage });

export default defineComponent({
  props: basicProps,
  // components: { Salesreport },
  setup() {
    // 点击不同天数获取不同报表数据
    async function handleChange(e) {
      checkedValueRef.value = e.target.value;
      console.log(e.target.value);
      let amount = e.target.value;
      let metNo = Storage.get('custNo');
      const data = await getSalesDate({ amount, metNo });
      console.log(data);
      salesValue.value = data.data.body;
      console.log(salesValue.value);
      let day = salesValue.value.map((item) => item.date);

      let totalAmt = salesValue.value.map((item) => item.totalAmt);
      let totalTxs = salesValue.value.map((item) => item.totalTxs);

      setOptions({
         tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
        toolbox: {},
        legend: {
          data: ['日累计交易额', '日累计交易笔数'],
        },
        grid: { left: '1%', right: '1%', top: '15  %', bottom: 0, containLabel: true },
        xAxis: [
          {
            type: 'category',
            data: day,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '日累计交易额',
            min: 0,
            max: 900,
            interval: 100,
            axisLabel: {},
          },
          {
            show: false,
            type: 'value',
            name: '日累计交易笔数',
            min: 0,
            max: 900,
            interval: 100,
            axisLabel: {},
          },
        ],
        series: [
          {
            name: '日累计交易额',
            type: 'bar',
            data: totalAmt,
          },
          {
            name: '日累计交易笔数',
            type: 'line',
            yAxisIndex: 1,
            data: totalTxs,
          },
        ],
      });
    }
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

    const salesValue = ref();
    // 默认选择近7天获取数据
    const checkedValueRef = ref('7');
    onMounted(async () => {
      let metNo = Storage.get('custNo');
      let amount = '7';
      console.log({ amount });
      const data = await getSalesDate({ amount, metNo });
      console.log(data);
      salesValue.value = data.data.body;
      let day = salesValue.value.map((item) => item.date);
      let totalAmt = salesValue.value.map((item) => item.totalAmt);
      let totalTxs = salesValue.value.map((item) => item.totalTxs);
      setOptions({
         tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
        toolbox: {},
        legend: {
          data: ['日累计交易额', '日累计交易笔数'],
        },
        grid: { left: '1%', right: '1%', top: '15  %', bottom: 0, containLabel: true },
        xAxis: [
          {
            type: 'category',
            data: day || [1, 2, 3, 4, 5, 6, 7],
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '日累计交易额',
            min: 0,
            max: 900,
            interval: 100,
            axisLabel: {},
          },
          {
            show: false,
            type: 'value',
            name: '日累计交易笔数',
            min: 0,
            max: 900,
            interval: 100,
            axisLabel: {},
          },
        ],
        series: [
          {
            name: '日累计交易额',
            type: 'bar',
            data: totalAmt || 0,
          },
          {
            name: '日累计交易笔数',
            type: 'line',
            yAxisIndex: 1,
            data: totalTxs || 0,
          },
        ],
      });
    });

    // 传参
    // provide('salesValue', salesValue.value);
    return {
      chartRef,
      provide,
      checkedValue: checkedValueRef,
      handleChange,
    };
  },
});
</script>
